<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="90px">
			<el-form-item label="订单编号:" prop="orderSn">
				<el-input v-model.trim="queryParams.orderSn" clearable placeholder="请输入订单编号" maxlength="18" show-word-limit />
			</el-form-item>
			<el-form-item label="用户ID:" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" clearable placeholder="请输入用户ID" maxlength="6" show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="phone">
				<el-input v-model.trim="queryParams.phone" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit />
			</el-form-item>
			<el-form-item label="商品ID:" prop="goodsId">
				<el-input v-model.trim="queryParams.goodsId" clearable placeholder="请输入商品ID" maxlength="6" show-word-limit />
			</el-form-item>
			<el-form-item label="商品名称:" prop="goodsName">
				<el-input v-model.trim="queryParams.goodsName" clearable placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item label="评分:" prop="star">
				<el-select v-model="queryParams.star" clearable placeholder="请选择评分">
					<el-option :value="null" label="全部" />
					<el-option :value="1" label="一星" />
					<el-option :value="2" label="二星" />
					<el-option :value="3" label="三星" />
					<el-option :value="4" label="四星" />
					<el-option :value="5" label="五星" />
				</el-select>
			</el-form-item>
			<el-form-item label="评价状态:" prop="isHide">
				<el-select v-model="queryParams.isHide" clearable placeholder="请选择评价状态">
					<el-option :value="null" label="全部" />
					<el-option :value="0" label="显示" />
					<el-option :value="1" label="隐藏" />
				</el-select>
			</el-form-item>
			<el-form-item label="回复状态:" prop="commentState">
				<el-select v-model="queryParams.commentState" clearable placeholder="请选择回复状态">
					<el-option :value="null" label="全部" />
					<el-option :value="1" label="已回复" />
					<el-option :value="0" label="未回复" />
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="评价时间:"></start-end-time>
		</el-form>

		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
		</template>

		<el-table v-loading="loading"  :data="commentList" stripe @selection-change="handleSelectionChange">
			<el-table-column :formatter="emptyToString" align="center" label="序号" prop="orderSn" type="index" />
			<el-table-column :formatter="emptyToString" align="center" label="订单编号" min-width="160" prop="orderSn" />
			<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" min-width="120" prop="phone" />
			<el-table-column :formatter="emptyToString" align="center" label="商品ID" min-width="120" prop="goodsId" />
			<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goods_name" show-overflow-tooltip width="150">
				<template slot-scope="scope">
					<div class="goods-name-style">
						{{ scope.row.goodsName ? scope.row.goodsName : '-' }}
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
				<template slot-scope="scope">
					<el-image v-if="scope.row.goodsUrl" :preview-src-list="[scope.row.goodsUrl]" :src="scope.row.goodsUrl" style="width: 48px; height: 48px"></el-image>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商家名称" prop="supplierName" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="评分" min-width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.star === 1">一星</span>
					<span v-if="scope.row.star === 2">二星</span>
					<span v-if="scope.row.star === 3">三星</span>
					<span v-if="scope.row.star === 4">四星</span>
					<span v-if="scope.row.star === 5">五星</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="评价内容" min-width="120">
				<template slot-scope="scope">
					<div class="multi-line" style="min-width: 80px" v-text="scope.row.content || '-'"></div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="评价图片" prop="picUrls" min-width="120">
				<template slot-scope="scope">
					<el-image v-for="item in scope.row.picUrls" :key="item" :lazy="true" :preview-src-list="[item]" :src="item" style="width: 40px; height: 40px; margin-right: 5px" />
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="评价状态" prop="isHide" min-width="156">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.isHide" :active-value="0" :inactive-value="1" active-text="显示" class="switch" inactive-text="隐藏" @change="statusChange($event, scope.row.id)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="回复状态" min-width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.commentState === 1">已回复</span>
					<span v-else-if="scope.row.commentState === 0">未回复</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column :formatter="emptyToString" :width="tableAction" align="center" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button v-hasPermi="['mall:comment:edit']" type="primary" @click="handleUpdate(scope.row)"
							><span v-if="scope.row.commentState == 1">详情</span>
							<span v-if="scope.row.commentState == 0">回复</span>
						</el-button>
						<el-button v-hasPermi="['mall:comment:remove']" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加或编辑评论对话框 -->
		<l-dialog v-model="open" :show-button="false" :title="title" width="800px" @close="open = false">
			<div v-if="title !== '回复'" class="content">
				<div class="title font-bold mb-[13px]">商品信息</div>
				<el-table stripe :data="[form]">
					<el-table-column prop="orderSn" :formatter="emptyToString" label="订单编号" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="goodsId" :formatter="emptyToString" label="商品ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="goodsName" show-overflow-tooltip width="150">
						<template slot-scope="scope">
							<div class="goods-name-style" style="color: var(--primary-color)">
								{{ scope.row.goodsName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
						<template slot-scope="scope">
							<el-image :preview-src-list="[scope.row.goodsUrl]" :src="scope.row.goodsUrl" style="width: 48px; height: 48px"></el-image>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商家名称" prop="supplierName" min-width="120" />
					<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="120" />
				</el-table>
			</div>
			<div v-if="title !== '回复'" class="content">
				<div class="title font-bold mb-[13px]">用户信息</div>
				<el-table stripe :data="[form]">
					<el-table-column prop="uuid" :formatter="emptyToString" label="用户ID" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="phone" :formatter="emptyToString" label="手机号码" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="consignee" :formatter="emptyToString" label="评分" min-width="120" show-overflow-tooltip align="center">
						<template slot-scope="scope"> {{ scope.row.star }}星 </template>
					</el-table-column>
				</el-table>
			</div>
			<div v-if="title === '回复'" class="content-box">
				<div class="content">
					<div class="title">订单信息</div>
					<div class="content-info">
						<div class="info">
							<div>订单号:</div>
						</div>
						<div class="info" style="display: flex; align-items: center">
							<div style="">
								<el-image :preview-src-list="[form.goodsUrl]" :src="form.goodsUrl" :z-index="999999" style="width: 58px; height: 58px"></el-image>
							</div>
							<div style="margin-left: 20px; margin-top: 0">
								<div style="">商品ID:{{ form.goodsId }}</div>
								<el-tooltip effect="dark" :content="form.goodsName" placement="top">
									<div style="margin-top: 10px" class="multi-one">商品名称:{{ form.goodsName }}</div>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
				<div class="content">
					<div class="title">用户信息</div>
					<div class="content-info">
						<div class="info">
							<div>用户ID:{{ form.uuid }}</div>
							<div>手机号码:{{ form.phone }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content-box">
				<div class="content content-input">
					<div class="title">评价内容</div>
					<div class="content-info">
						{{ form.content }}
					</div>
				</div>
				<div class="content content-img">
					<div class="title">评价图片</div>
					<div class="content-info">
						<el-image v-for="(value, index) in form.picUrls" :key="index" :preview-src-list="[value]" :src="value" :z-index="999999" class="img" style="width: 162px; height: 102px"></el-image>
					</div>
				</div>
			</div>
			<div v-if="title === '回复'" class="content-box">
				<div class="content content-input2">
					<div class="title">回复</div>
					<div class="content-info">
						<el-input v-model.trim="form.adminContent" :rows="5" placeholder="请输入内容" type="textarea"></el-input>
					</div>
				</div>
				<div class="content content-img">
					<div class="title">回复内容</div>
					<div class="content-info">
						<vuedraggable-upload-image v-model.trim="form.adminPicUrls"></vuedraggable-upload-image>
					</div>
				</div>
			</div>
			<el-button v-if="form.commentState == 0" class="submit-btb" type="primary" @click="submitForm">发送</el-button>
		</l-dialog>
		<l-dialog v-model="dialogFormVisible" title="新增评论" width="534px" @close="handleClose" @formClose="handleClose" @formSubmit="addSubmit">
			<el-form ref="ruleForm1" :model="addForm" :rules="rules" label-position="left" label-width="120px">
				<el-form-item label="用户名称:" prop="userName">
					<el-input v-model.trim="addForm.userName" autocomplete="off" style="width: 400px"></el-input>
				</el-form-item>
				<el-form-item label="用户电话:" prop="phone">
					<el-input v-model.trim="addForm.phone" autocomplete="off" style="width: 400px"></el-input>
				</el-form-item>
				<el-form-item label="商品:" prop="goodsId">
					<el-select v-model.trim="addForm.goodsId" :loading="loading1" :remote-method="remoteMethod" clearable filterable placeholder="请输入商品ID" remote reserve-keyword @change="optionsChange">
						<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="selectGood.id" label="">
					<div style="display: flex; border: 1px dashed #cccccc; padding: 10px; border-radius: 10px; width: 299px">
						<el-image :preview-src-list="[selectGood.picUrl]" :src="selectGood.picUrl" :z-index="9999" style="width: 80px; height: 80px"></el-image>
						<div style="padding-left: 10px">
							<div>商品ID:{{ selectGood.id }}</div>
							<el-tooltip effect="dark" :content="selectGood.name" placement="top">
								<div class="multi-ones">商品名称:{{ selectGood.name }}</div>
							</el-tooltip>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="评价内容:" prop="content">
					<el-input v-model.trim="addForm.content" autocomplete="off" style="width: 400px"></el-input>
				</el-form-item>
				<el-form-item label="评价图片:">
					<vuedraggable-upload-image v-model.trim="adminPicUrls"></vuedraggable-upload-image>
				</el-form-item>
			</el-form>
		</l-dialog>
	</l-page>
</template>

<script>
import { addComment, delComment, exportComment, getComment, listComment, updateComment } from '@/api/mall/comment';
import { listGoods } from '@/api/mall/goods';
import Editor from '@/components/Editor';
import vuedraggableUploadImage from '@/components/vuedraggable-upload-image';
import startEndTime from '@/components/StartEndTime';
import debounce from 'lodash/debounce';
import tableMixins from '@/mixins/table';
import { editUserStatus } from '@/api/mall/user';
import TemplateZone from '@/views/mall/logistics/templateZone';

export default {
	name: 'Comment',
	components: {
		TemplateZone,
		Editor,
		vuedraggableUploadImage,
		startEndTime,
	},
	mixins: [tableMixins],
	data() {
		return {
			tableAction: 50,
			// 遮罩层
			loading: true,
			loading1: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 评论表格数据
			commentList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			picUrlList: [],
			textarea: '',
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				valueId: null,
				type: null,
				content: null,
				adminContent: null,
				goodsId: null,
				goodsName: null,
				username: null,
				userId: null,
				uuid: null,
				phone: null,
				orderSn: null,
				hasPicture: null,
				picUrls: null,
				isHide: null,
				star: null,
				commentState: null,
				date: [],
				startTime: null,
				endTime: null,
			},
			orderDetails: '',
			// 表单参数
			form: {},
			// 表单校验
			adminPicUrls: [],
			addForm: {},
			options: [],
			selectGood: {},
			dialogFormVisible: false,
			rules: {
				userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
				phone: [{ required: true, message: '请输入用户电话', trigger: 'blur' }],
				goodsId: [{ required: true, message: '请选择商品', trigger: 'change' }],
				content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
			},
		};
	},
	created() {
		this.getList();
	},
	methods: {
		statusChange(event, row) {
			this.$request
				.post('/mall/comment/edit', {
					id: row,
					isHide: event,
				})
				.then(() => {
					this.msgSuccess('更新成功');
					this.getList();
				});
		},
		/** 搜索评论列表 */
		handleClose() {
			this.dialogFormVisible = false;
			this.selectGood = {};
			this.adminPicUrls = [];
			this.options = [];
			this.addForm = {};
			this.$refs['ruleForm1'].resetFields();
		},
		addSubmit: debounce(
			function () {
				this.$refs['ruleForm1'].validate((valid) => {
					if (valid) {
						if (!this.adminPicUrls.length) {
							this.$message.error('请选择图片!');
							return;
						}
						this.addForm.picUrls = this.adminPicUrls.toString(',');
						addComment(this.addForm).then((res) => {
							this.$message.success('新增成功!');
							this.handleClose();
							this.getList();
						});
					} else {
						return false;
					}
				});
			},
			1500,
			{
				leading: true,
				trailing: false,
			}
		),
		optionsChange(value) {
			if (!value) {
				this.selectGood = {};
				return;
			}
			this.options.forEach((v) => {
				if (v.id == value) {
					console.log(v);
					this.selectGood = v;
				}
			});
		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading1 = true;

				listGoods({
					pageNum: 1,
					pageSize: 10,
					id: query,
				}).then((res) => {
					this.loading1 = false;
					this.options = res.data.records;
					console.log(res);
				});
			} else {
				this.options = [];
			}
		},
		getList() {
			this.loading = true;
			if (this.queryParams.date && this.queryParams.date.length > 0) {
				this.queryParams.startTime = this.queryParams.date[0];
				this.queryParams.endTime = this.queryParams.date[1];
			}
			listComment(this.queryParams)
				.then((response) => {
					this.commentList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				valueId: null,
				type: null,
				content: null,
				adminContent: null,
				userId: null,
				hasPicture: null,
				picUrls: null,
				star: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		// 获取评价时间
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime(); // 清空评价时间
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			// this.reset();
			this.dialogFormVisible = true;
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			getComment(id).then((response) => {
				this.form = response.data;
				this.form.adminPicUrls = response.data.adminPicUrls ? response.data.adminPicUrls : [];
				this.open = true;
				if (this.form.commentState === 1) {
					this.title = '详情';
				} else {
					this.title = '回复';
				}
			});
		},
		/** 提交按钮 */
		submitForm() {
			if (!this.form.adminContent) {
				this.msgError('请填写回复内容！');
				return;
			}
			updateComment({
				id: this.form.id,
				commentState: 1,
				adminPicUrls: this.form.adminPicUrls.toString(','),
				adminContent: this.form.adminContent,
			}).then(() => {
				this.msgSuccess('发送成功');
				this.open = false;
				this.getList();
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id;
			this.$confirm('是否确认删除该评论?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delComment([ids]);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有评论数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportComment(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.el-table {
	//.cell {
	//  padding: 0;
	//  }
}

.submit-btb {
	display: block;
	margin: 0px auto 20px;
	padding: 0;
	width: 345px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 18px;
}

::v-deep .draggable-item {
	width: 158px !important;
	height: 103px !important;
}

::v-deep .uploadBox {
	width: 158px !important;
	height: 103px !important;
}

.content-box {
	display: flex;
	justify-content: center;
}

.content {
	//border-bottom: 1px solid #E5E5E5;
	padding-bottom: 31px;
	margin: 0 20px;
	color: #333333;

	&.content-input {
		.content-info {
			//border: none;
			//margin: 0;
			//padding: 0;
			margin-top: 16px;
			border: 1px solid #cccccc;
			padding: 12px;
		}
	}

	&.content-input2 {
		.content-info {
			//border: none;
			margin: 0;
			padding: 0;
			margin-top: 16px;
			border: none;
			//padding:12px ;
		}
	}

	&.content-img {
		.content-info {
			border: none;
			margin: 0;
			padding: 0;
			margin-top: 16px;
			display: flex;
			justify-content: space-between;
			height: auto;

			.img {
				border-radius: 5px;
				margin-bottom: 5px;
			}
		}
	}

	//margin-bottom: 22px;
	/*margin-top: 20px;*/
	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.content-info {
		display: flex;
		padding: 11px 16px;
		border: 1px dashed #cccccc;
		border-radius: 10px;
		margin-top: 16px;
		flex-wrap: wrap;
		width: 330px;
		height: 133px;

		.info2 {
			padding-left: 23px;
			position: relative;
			//::after{
			//  content: "";
			//  position: absolute;
			//  left: 0;
			//  top: 20px;
			//  width: 1px;
			//  height: 30px;
			//  background:  #CCCCCC;;
			//  opacity: 1;
			//}
		}

		.info {
			width: 100%;

			> div {
				//margin-top: 10px;
				padding: 5px 0;
			}
		}
	}
}
</style>
